<template>
  <view class="OrderAddress">
    <view class="formView">
      <view class="form">
        <u-field label="地址" disabled>
          <view slot="right" class="address" @click="chooseLocation">
            <text class="check" v-if="addressName">{{ addressName }}</text>
            <text v-else>点击选择地址</text>
            <u-icon class="arrow" name="arrow-right"></u-icon>
          </view>
        </u-field>

        <u-field v-model="addressDetail" label="门牌号" placeholder="详细地址，如1层101室" input-align="right" :clearable="false">
        </u-field>
        <u-field v-model="name" label="联系人" placeholder="请输入联系人" input-align="right" :clearable="false"></u-field>
        <u-field
          v-model="mobile"
          type="number"
          maxlength="11"
          label="手机号码"
          placeholder="请输入手机号"
          input-align="right"
          :clearable="false"
        >
        </u-field>
        <u-field label="设为默认" disabled :border-bottom="false">
          <u-switch slot="right" v-model="defaultFlag" active-color="#4C71EE" :size="48"></u-switch>
        </u-field>
      </view>
    </view>

    <view class="buttonDiv" @click="handleSubmit"> 保存 </view>
    <u-toast ref="uToast" />
  </view>
</template>
<script>
// import { addressAlter, getAddressList } from '@/api/project.js';
import { chooseLocation } from '@/utils/jssdk';
export default {
  name: 'OrderAddress',
  components: {},
  props: {},
  data() {
    return {
      id: '',
      lat: '',
      lng: '',
      mobile: '',
      name: '',
      defaultFlag: false,
      addressName: '',
      addressDetail: '',
      areaCode: '',
      statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
      // 导航栏内容区域高度，不包括状态栏高度在内
      navbarHeight: 44
    };
  },
  computed: {},
  methods: {
    chooseLocation() {
      chooseLocation()
        .then((res) => {
          console.log(res);
          this.lat = res.latitude;
          this.lng = res.longitude;
          this.addressName = res.name;
          this.areaCode = res.areaCode;
        })
        .catch((err) => {
          uni.showModal({
            content: err
          });
        });
    },
    handleSubmit() {
      if (!this.addressDetail || !this.name || !this.mobile || !this.addressName) {
        this.$refs.uToast.show({
          title: !this.addressName
            ? '请选择地址'
            : !this.addressDetail
              ? '请输入门牌号'
              : !this.name
                ? '请输入联系人'
                : !this.mobile
                  ? '请输入手机号'
                  : '',
          duration: '2300'
        });
        return;
      }
      const pd = {
        id: this.id,
        lat: this.lat,
        lng: this.lng,
        mobile: this.mobile,
        name: this.name,
        areaCode: this.areaCode,
        defaultFlag: this.defaultFlag,
        addressDetail: this.addressName + '%$' + this.addressDetail
      };
      addressAlter(pd).then(() => {
        uni.navigateBack();
        uni.$emit('updateAddress');
      });
    }
  },
  watch: {},
  // 页面周期函数--监听页面加载
  onLoad(option) {
    // if (option.id) {
    //   this.id = option.id;
    //   getAddressList({ pageSize: 999, id: this.id }).then((res) => {
    //     const item = res.data[0];
    //     if (item.addressDetail) {
    //       this.addressDetail = item.addressDetail.split('%$')[1];
    //       this.addressName = item.addressDetail.split('%$')[0];
    //     }
    //     this.lat = item.lat;
    //     this.lng = item.lng;
    //     this.mobile = item.mobile;
    //     this.name = item.name;
    //     this.defaultFlag = item.defaultFlag;
    //   });
    // }
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {}
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
};
</script>

<style lang="scss" scoped>
.OrderAddress {
  padding: 28rpx 32rpx 0;
  background: #f7f8f9;
  min-height: calc(100vh - 88rpx - env(safe-area-inset-top));
  @import './index.scss';
}
</style>
